import React,{Component} from 'react';
import {render} from 'react-dom';

class MarkdownEditor extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = { value: 'Type some *markdown* here!' };
    }

    handleChange(e) {
      this.setState({ value: e.target.value });
    }

    getRawMarkup() {
      const md = new Remarkable();
      return { __html: md.render(this.state.value) };
    }

    render() {
      return (
        <div className="MarkdownEditor">
          <h3>Input</h3>
          <textarea
            onChange={this.handleChange}
            defaultValue={this.state.value}
          />
          <h3>Output</h3>
          <div
            className="content"
            dangerouslySetInnerHTML={this.getRawMarkup()}
          />
        </div>
      );
    }
  }

  render(<MarkdownEditor />, document.getElementById('root'));